<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<view class="label">WIFI名称</view>
				<view class="input-wrapper">
					<input class="input" v-model="wifiName" placeholder="请输入WIFI名称"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">WIFI密码</view>
				<view class="input-wrapper">
					<input class="input" v-model="password" placeholder="请输入WIFI密码" :password="isPassword"/>
					<view class="icon-wrapper" @click="onSetPassword">
						<u-icon v-if="!isPassword" name="eye-fill" size="40" color="#010101" />
						<u-icon v-else name="eye-off" size="40" color="#010101" />
					</view>
				</view>
			</view>
		</view>
		<BaseButton class="btn-wrapper" shape="circle" text="下一步" @click="onNext" />
		
		<UpdateDialog :show="isUpdateDialog" text="配置WIFI信息" />
	</view>
</template>

<script>
	import BaseButton from "@/components/base-button/index.vue";
	import UpdateDialog from "./components/update-dialog/index.vue";
	import {
		hideLoading,
		showInfo,
		showLoading
	} from "@/utils/ToastUtils";
	import * as DeviceApi from '@/api/device/index.js';

	export default {
		data() {
			return {
				wifiName: "",
				password: "",
				isUpdateDialog: false,
				isPassword: true,
			};
		},
		components: {
			BaseButton,
			UpdateDialog
		},
		onLoad() {
			uni.onWifiConnected((res) => {
				console.log("onWifiConnected state:", res);
			})
			uni.startWifi({
				success: () => {
					console.log("wifi初始化成功");
				},
				fail: (err) => {
					console.log("wifi初始化失败", err);
				}
			})
		},
		methods: {
			onSetPassword() {
				this.isPassword = !this.isPassword;
			},
			onNext() {
				if (!this.wifiName) {
					showInfo("请输入wifi名称");
					return;
				} else if (!this.password) {
					showInfo("请输入wifi密码");
					return;
				}
				const isFlag = uni.canIUse("connectWifi");
				console.log("isFlag", isFlag);
				this.isUpdateDialog = true;
				uni.request({
					url: 'http://192.168.51.1/settings.htm',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						SSID: this.wifiName,
						PSK: this.password,
						Server: "47.97.72.174,8003",
						save: "Save",
					},
					success: (res) => {
						console.log("config success", res);
						setTimeout(() => {
							console.log("连接wifi");
							this.bindUser();
							// uni.connectWifi({
							// 	SSID: this.wifiName,
							// 	password: this.password,
							// 	partialInfo: true,
							// 	success: (res) => {
							// 		console.log("connectWifi success", res);
							// 		this.bindUser();
							// 	},
							// 	fail: (err) => {
							// 		console.log("connectWifi error", err);
							// 	}
							// })
						}, 3000)
					},
					fail: (err) => {
						console.log("config error", err);
						uni.navigateTo({
							url:'/pages/addDevice/configWifiError?isFlag=1'
						})
					}
				})
			},
			bindUser() {
				const param = {
					deviceName: this.$addDeviceService.device.deviceName,
					deviceType: this.$addDeviceService.device.deviceType,
					uuid: this.$addDeviceService.uuid,
				};
				DeviceApi.bindDevice(param).then(res => {
					this.isUpdateDialog = false;
					this.$addDeviceService.clear();
					uni.reLaunch({
						url:'/pages/index/index'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #FFFFFF;

		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50rpx;

			.form-item {
				margin-bottom: 50rpx;

				.label {
					font-size: 30rpx;
					color: #010101;
					margin-bottom: 20rpx;
				}

				.input-wrapper {
					width: 700rpx;
					height: 90rpx;
					background: #F2F3F5;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					
					.input {
						flex: 1;
						color: #010101;
						font-size: 30rpx;
						padding:0 20rpx;
					}
					
					.icon-wrapper {
						padding: 20rpx;
					}
				}

			}
		}

		.btn-wrapper {
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>